import { HooksDemos } from "@/lib/@docs/demos/src";
import { Layout } from "@/layout";
import { MDX_DATA } from "@/mdx";

export default Layout(MDX_DATA.useInterval);

## Usage

<Demo data={HooksDemos.useIntervalDemo} />

## API

```tsx
import { useInterval } from "@mantine/hook";

const { start, stop, toggle, active } = useInterval(fn, interval);
```

Arguments:

- `fn` – function that is called at each interval tick
- `interval` – amount of milliseconds between each tick

Return object:

- `start` – start interval
- `stop` – stop interval
- `toggle` – toggle interval
- `active` – current interval status

## Definition

```tsx
function useInterval(
  fn: () => void,
  interval: number
): {
  start: () => void;
  stop: () => void;
  toggle: () => void;
  active: boolean;
};
```
